<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>小颜有点色</title>
    <style>
      body, html, canvas {
        margin: 0px;
        padding: 0px;
        position: absolute;
        background-color: #343435;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      canvas {
        transform: translate3d(0,0,0);
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <script>
      window.requestAnimFrame = (function(){
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(callback){
                window.setTimeout(callback, 1000 / 60);
            };
      })();
      var getTouchPosition = function(e) {
        e = e.originalEvent || e; //jquery wrap the originevent
        if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') {
          return {
            x: e.targetTouches[0].pageX,
            y: e.targetTouches[0].pageY
          };
        } else {
          return {
            x: e.pageX,
            y: e.pageY
          };
        }
      };

      function between(min, max) {
        return Math.random() * (max - min) + min;
      }

      var c = document.getElementById('c');
      var ctx = c.getContext('2d');
      //context and id of canvas

      var w = window.innerWidth;
      var h = window.innerHeight;
      //width and height of canvas

      c.width = w;
      c.height = h;
      //setting the width and height for canvas

      var partNum = (w * h) / 3750;
      //particle number - change it!

      var mouse = {
        x: w / 2,
        y: h / 2,
        r: 25
      };
      //mouse position

      document.addEventListener('touchmove', function(e){
        var position = getTouchPosition(e);
        mouse.x = position.x;
        mouse.y = position.y;
      }, false);
      //finding the mouse position

      mouse.r = 25;
      var cursorOpacity = 1;
      var cursorTrue = false;
      var cursorMinDest = 25;

      document.addEventListener('touchend', function(){
        mouse.r = 100;
        cursorOpacity = 0.2;
        cursorTrue = true;
        cursorMinDest = 200;
      }, false);
      // making implode

      document.addEventListener('touchend', function(){
        mouse.r = 25;
        cursorOpacity = 1;
        cursorTrue = false;
        cursorMinDest = 25;
      }, false);
      // making implode

      var particles = [];
      for(i = 0; i < partNum; i++) {
        particles.push(new particle);
      }

    //the particle function
      function particle() {
        this.x = Math.random() * c.width;
        this.y = Math.random() * c.height;
        //setting the mouse position to the particle x and y

        this.vx = 0;
        this.vy = 0;

        this.r = Math.random() * 15;

        var r = '#c0392b';
        var o = '#e67e22';
        var y = '#f1c40f';
        var array = [r, o, y];
        this.color = array[Math.floor(Math.random() * 3)];
      }

      function draw() {
        requestAnimFrame(draw);

        ctx.fillStyle = 'rgba(52, 52, 53, 1)';
        ctx.fillRect(0, 0, c.width, c.height);

        ctx.beginPath();
        ctx.fillStyle = 'rgba(255, 255, 255, ' + cursorOpacity + ')';
        ctx.arc(mouse.x, mouse.y, mouse.r, Math.PI * 2, false);
        ctx.fill();

        for(t = 0; t < particles.length; t++) {
          var p = particles[t];

          ctx.beginPath();
          ctx.fillStyle = p.color;
          ctx.arc(p.x, p.y, p.r, Math.PI * 2, false);
          ctx.fill();
          //the context of the particle(s)

          p.x+=p.vx;
          p.y+=p.vy;

          p.vx*=0.95;
          p.vy*=0.95;

          if(p.y < 0 + p.r) {
            p.vy *= -1;
          }
          if(p.y > c.height - p.r) {
            p.vy *= -1;
          }
          if(p.x < 0 + p.r) {
            p.vx *= -1;
          }
          if(p.x > c.width - p.r) {
            p.vx *= -1;
          }
          if(p.r < 3) {
            p.color = 'white';
          };



          for(j = 0; j < particles.length; j++) {
            var pp = particles[j];
            distance(p, pp);
          }

          distance(mouse, p);
        }
      }

      function distance(p1, p2) {
        var dist,
          dx = p1.x - p2.x,
          dy = p1.y - p2.y;

        dist = Math.sqrt(dx*dx + dy*dy);

        // Draw the line when distance is smaller
        // then the minimum distance
        var minDist = p1.r + p2.r;

        if(dist <= minDist) {
          var ax = dx,
            ay = dy;
          // Some acceleration for the partcles
          // depending upon their distance
          if(cursorTrue) {
            p2.vx += ax/100;
            p2.vy += ay/100;
          } else {
            p2.vx -= ax/30;
            p2.vy -= ay/30;
          }
        }
      }

      draw();
    </script>

  </body>
</html>
